<template>
  <div class="page-container">
    <el-card shadow="never" class="search-form-card">
      <el-form class="search-form" inline label-width="105px" label-suffix=":">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="服务状态">
              <el-select v-model="searchParams.status" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务名称">
              <el-input v-model="searchParams.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开放类型">
              <el-select v-model="searchParams.openType" placeholder="请选择">
                <el-option
                  v-for="item in openTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="共享类型">
              <el-select v-model="searchParams.shareType" placeholder="请选择">
                <el-option
                  v-for="item in shareTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="handleAdd1">新增库表</el-button>
          <el-button type="primary" @click="handleAdd2">新增接口</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName">
        <el-tab-pane label="库表" name="lib">
          <lib-page ref="lib" :params="{ ...searchParams, type: 'database'}" />
        </el-tab-pane>
        <el-tab-pane label="接口" name="interface">
          <interface-page ref="interface" :params="{ ...searchParams, type: 'api'}" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import LibPage from './lib'
import InterfacePage from './interface'
import { mapGetters } from 'vuex'
import { http_dept } from '@/api'
import { dict_openTypeList, dict_shareTypeList } from '@/dict'

export default {
  components: {
    LibPage,
    InterfacePage
  },
  computed: {
    ...mapGetters(['enum']),
    statusList() {
      return this.enum['PublishDataStatusType'] || []
    },
    typeList() {
      return this.enum['ServerType'] || []
    }
  },
  data() {
    return {
      activeName: 'lib',
      searchParams: {
        status: '',
        name: '',
        openType: false,
        shareType: ''
      },
      openTypeList: dict_openTypeList,
      shareTypeList: dict_shareTypeList
    }
  },
  created() {
    http_dept.tree().then(res => {
      this.deptList = res
    })
  },
  methods: {
    onSearch() {
      this.$refs[this.activeName].onSearch()
    },
    onReset() {
      for (const key in this.searchParams) {
        switch (key) {
          case 'timeValue':
            this.searchParams.timeValue = []
            break
          default:
            this.searchParams[key] = ''
        }
      }
      this.onSearch()
    },
    handleAdd1() {
      this.activeName = 'lib'
      this.$refs.lib.openDraw()
    },
    handleAdd2() {
      this.activeName = 'interface'
      this.$refs.interface.openDraw()
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}
</style>
